<template>
    <div class="container">
        <h2>动画示例</h2>
        <button @click="isVisible = !isVisible">切换</button>
        <Transition name="fade">
            <p v-if="isVisible">这是一个可切换的文本！</p>
        </Transition>
    </div>
</template>

<script setup>
import {ref} from 'vue'

const isVisible = ref(false)
</script>

<style scoped>
.container{
    background-color: rgb(199, 215, 215);
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}

/* 一开始进入时透明 */
.fade-enter-from{
    opacity:0;
}
/* 完全进入后不透明(这个一般不要写) */
.fade-enter-to{
    opacity:0.8;
}
/* 控制开始进入到完全进入之间状态改变的规则 */
.fade-enter-active{
    transition: opacity 5s;
}

/* 一开始离开时不透明(这个一般不要写) */
.fade-leave-from{
    opacity:0.8;
}
/* 完全离开时透明 */
.fade-leave-to{
    opacity:0;
}
/* 控制开始离开到完全离开之间状态改变的规则 */
.fade-leave-active{
    transition:opacity 5s;
}

/* 动画相关类解释
   - <Transition> 或 <TransitionGroup> 组件用于包裹需要添加动画的元素。
1. 进入动画相关类：
   - fade-enter-active: 在进入动画期间应用的类，用于定义过渡效果。
   - fade-enter-from: 定义元素进入时的初始样式，例如：opacity: 0。
   - fade-enter-to: 定义元素进入时的最终样式，默认情况下为 opacity: 1。
   
2. 离开动画相关类：
   - fade-leave-active: 在离开动画期间应用的类，用于定义过渡效果。
   - fade-leave-from: 定义元素离开时的初始样式，通常不需要显式定义。
   - fade-leave-to: 定义元素离开时的最终样式，例如：opacity: 0。
*/
</style>